import { useState, useEffect } from 'react';
import { Button } from 'antd'
import BaseLayout from '../../../layouts/BaseLayout/BaseLayout.jsx'

const Demo = () => {
	const [count1, setCount1] = useState(0);
	const [count2, setCount2] = useState(111);
	//默认的行为，会每次 render 后都执行，一般表单控制中使用
	useEffect(() => {
		console.log('useEffect 没有参数')
	});
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[]')
	}, []);
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[count1]', count1)
	}, [count1]);
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[count2]', count2)
	}, [count2]);
	//返回时传递一个函数进行卸载，在组件卸载时候调用
	useEffect(() => {
		return () => {
			console.log('useEffect 函数内部返回一个函数'); 
		}
	});
	return (
		<BaseLayout>
			<div className='note-title-a'>hooks 的 useEffect 周期</div>
			<div className="note-example-box">
				<div className="note-example-intro">hooks 主要通过 useEffect 模拟生命周期，主要有4种情况。</div>
				<Button onClick={() => setCount1(count1 + 1)}>变量:count1:{count1}</Button>
				<Button onClick={() => setCount2(count2 + 1)}>变量:count2:{count2}</Button>
				<div className="note-code-case">
					<textarea defaultValue={codeVal} style={{height: '800px'}}></textarea>
				</div>
			</div>
		</BaseLayout>
	);
};

const codeVal = `const Demo = () => {
	const [count1, setCount1] = useState(0);
	const [count2, setCount2] = useState(111);
	//默认的行为，会每次 render 后都执行，一般表单控制中使用
	useEffect(() => {
		console.log('useEffect 没有参数')
	});
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[]')
	}, []);
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[count1]', count1)
	}, [count1]);
	//传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次
	useEffect(() => {
		console.log('useEffect 参数为:[count2]', count2)
	}, [count2]);
	//返回时传递一个函数进行卸载，在组件卸载时候调用
	useEffect(() => {
		return () => {
			console.log('useEffect 函数内部返回一个函数'); 
		}
	});
	return (
		<BaseLayout>
			<div className='note-title-a'>hooks 的 useEffect 周期</div>
			<div className="note-example-box">
				<Button onClick={() => setCount1(count1 + 1)}>变量:count1:{count1}</Button>
				<Button onClick={() => setCount2(count2 + 1)}>变量:count2:{count2}</Button>
			</div>
		</BaseLayout>
	);
};`;

export default Demo;
